<template>
	<view class="container">
		<image class="lottery-image" :class="{ shaking: isShaking }" src="../../static/images/dream.png"
			mode="aspectFit"></image>
		<button class="shake-btn anBreat" @click="startShake" :disabled="isShaking">
			{{isShaking ? '摇签中...' : '今日求签'}}
		</button>
		<view class="tips">剩余次数：{{clickCount}}次</view>
		<view v-if="showResult" class="result-container">
			<!-- <image class="sign-image" src="/static/sign-paper.png"></image> -->
			<view class="sign-text">
				<text class="sign-title">{{currentSign.type}}</text>
				<text class="sign-desc">{{currentSign.desc}}</text>
				<text class="sign-poem">{{currentSign.poem}}</text>
			</view>
		</view>
		<view v-if="showResult&&!showContentFlag" @click="handleAna" class="analysisBtn anBreat">
			{{isShowLoading ? '解签中...' : '解签'}}
		</view>
		<view v-if="showContentFlag" class="signContent">
			<view class="txt">解签内容：</view>
			<view>{{ currentSign.content}}

			</view>
		</view>

	</view>
</template>

<script>
	import {
		signsData
	} from '../../utils/constant.js';
	export default {
		data() {
			return {
				isShaking: false,
				showResult: false,
				currentSign: {},
				currentIndex: 0,
				showContentFlag: false,
				isShowLoading: false,
				clickCount:10
			}
		},
		onLoad() {
			if(uni.getStorageSync('lastTime')){
				if(this.isTimeWithinToday(uni.getStorageSync('lastTime'))){
					if(uni.getStorageSync('clickCount')||uni.getStorageSync('clickCount')==0){
						this.clickCount = uni.getStorageSync('clickCount')
					}else{
						this.resetCount()
					}
				}else{
					this.resetCount()
				}
			}else{
				this.resetCount()
			}
			
		},
		onShareAppMessage(res) {
			return {
				title: '瞧瞧，势不可挡！', // 必填，最长28汉字
				path: '/pages/dream/index', // 带参数示例
				imageUrl: '/static/images/today.png' // 建议尺寸比例5:4
			}
		},
		methods: {
			
			resetCount(){
				this.clickCount = 10
				uni.setStorageSync('clickCount',this.clickCount)
			},
			startShake() {
				if(this.clickCount<=0){
					uni.showToast({
						icon:'none',
						title:'次数已用完，请明天继续！'
					})
					return
				}
				if (this.isShaking) return
				this.isShaking = true
				this.showResult = false
				this.showContentFlag = false
				this.isShowLoading = false
				uni.vibrateShort({
					type: 'heavy'
				})
				if(this.clickCount>0){
					this.clickCount = this.clickCount-1
					uni.setStorageSync('clickCount',this.clickCount)
					uni.setStorageSync('lastTime',new Date())
				}
				setTimeout(() => {
					this.drawSign()
					this.isShaking = false
					this.showResult = true
				}, 2000)
			},
			drawSign() {
			
				const index = Math.floor(Math.random() * signsData.length)
				this.currentSign = signsData[index]
				this.currentIndex = index
			},
			handleAna() {
				this.isShowLoading = true
				setTimeout(() => {
					this.showContentFlag = true
				}, 2000)
			},
			isTimeWithinToday(cachedTime) {
			    const cachedDate = new Date(cachedTime);
			    const now = new Date();
			    return (
			        cachedDate.getFullYear() === now.getFullYear() &&
			        cachedDate.getMonth() === now.getMonth() &&
			        cachedDate.getDate() === now.getDate()
			    );
			}
			
			
		}
	}
</script>

<style lang="less">
	.container {
		height: 100vh;
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #ffdeae;
	}

	.lottery-image {
		width: 400rpx;
		margin:0 auto;
		margin-top: 40rpx;
		transition: all 0.3s;
	}

	.shaking {
		animation: shake 0.5s linear infinite;
	}

	@keyframes shake {
		0% {
			transform: rotate(-10deg);
		}

		50% {
			transform: rotate(10deg);
		}

		100% {
			transform: rotate(-10deg);
		}
	}

	.shake-btn {
		margin-top: 20rpx;
		width: 240rpx;
		height: 80rpx;
		line-height: 80rpx;
		background: linear-gradient(135deg, #f97f5a, #ff693c);
		color: #fff;
		border-radius: 40rpx;
		font-size: 32rpx;
	}

	.result-container {
		position: relative;
		margin-top: 40rpx;
		width: 80%;
	}

	.sign-image {
		width: 100%;
		height: 300rpx;
	}

	.sign-text {
		/* position: absolute;
		top: 0; */
		width: 100%;
		text-align: center;
	}

	.sign-title {
		display: block;
		color: #ff5133;
		font-size: 44rpx;
		font-weight: bold;
	}

	.sign-poem {
		display: block;
		font-size: 34rpx;
		color: #6c584c;
		background: #fff;
		padding: 20rpx;
		border-radius: 5px;
	}

	.sign-desc {
		display: block;
		font-size: 28rpx;
		color: #a98467;
		margin-top: 20rpx;
		margin-bottom: 20rpx;
	}

	.analysisBtn {
		background: #ecbb76;
		color: #fff;
		width: 30%;
		margin: 20px auto 0;
		padding: 10px;
		text-align: center;
		border-radius: 20px;
	}

	.signContent {
		padding: 0 80rpx;
		margin-top: 10px;
		color: #6c584c;
		font-size: 14px;

		.txt {
			color: #999;
			margin-bottom: 5px;
		}
	}
	.tips{
		font-size: 24rpx;
		color: #666;
		margin-top: 20rpx;
	}
	.anBreat{
		animation: breathing-combined 3s ease-in-out infinite;
	}
	@keyframes breathing-combined {
	  0%, 100% {
	    transform: scale(0.98);
	    opacity: 0.9;
	  }
	  50% {
	    transform: scale(1.08);
	    opacity: 1;
	  }
	}
	
</style>